<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>科目表-编辑</title>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" href="css/layui.css" media="all">
		<link rel="stylesheet" href="css/bootstrap.css">
		<link rel="stylesheet" href="css/owl.css">
		<link rel="stylesheet" href="css/animate.css">
		<link rel="stylesheet" href="css/magnific-popup.css">
		<link rel="stylesheet" href="css/fontawesome.css">
		<link rel="stylesheet" href="css/meanmenu.css">
		<link rel="stylesheet" href="css/slick.css">
		<link rel="stylesheet" href="css/default.css">
		<link rel="stylesheet" href="css/main.css">
		<link rel="stylesheet" href="css/responsive.css">
	</head>
	<body>

		<div id="firstVue">
			<div class="header-area header-transparent header-space pt-15"
				style="position: fixed;background: url(img/slide-bg.png);">
				<div class="container-fluid">
					<div class="row">
						<div class="d-none d-lg-block" style="width: 100%;margin: 0 auto;padding-bottom: 20px;">
							<div class="main-menu text-center">
								<nav id="mobile-menu" style="display: block;">
									<ul>
										<li><a href="index.html">首页</a></li>
										<li><a href="javascript:void(0);">
												<div v-if="retuserid">用户ID:{{retuserid}}</div>
												<div v-if="type==1">类型:学生</div>
												<div v-else-if="type==2">类型:管理员</div>
												<div v-else>类型:教师</div>
											</a></li>
										<!-- <li><a href="javascript:void(0);" id="login">登录</a></li> -->
										<!-- <li><a href="javascript:void(0);" id="register">注册</a></li> -->
										<!-- <li><a href="javascript:void(0);">数据管理</a>
											<ul class="submenu">
												<li><a href="javascript:void(0);" @click="add">添加数据</a></li>
												<li><a href="javascript:void(0);" @click="set">保存数据至云端</a></li>
												<li><a href="javascript:void(0);" @click="del">删除数据</a></li>
												<li><a href="javascript:void(0);" @click="getpy">查看评语</a></li>
												<li><a href="javascript:void(0);">------</a></li>
												<li><a href="javascript:void(0);" class="configRun">导入文件</a></li>
												<li><a href="javascript:void(0);" @click="setwj">导出文件</a></li>
											</ul>
										</li> -->
										<li v-if="type==2"><a href="javascript:void(0);" @click="add">添加数据</a></li>
										<li v-if="type==2"><a href="javascript:void(0);" @click="set">保存数据至云端</a></li>
										<li v-if="type==2"><a href="javascript:void(0);" @click="del">删除数据</a></li>
										<!-- <li><a href="javascript:void(0);" @click="getpy">查看评语</a></li> -->
										<li><a href="javascript:void(0);" @click="getgrzj">查看个人总结</a></li>
										<li v-show="type==2"><a href="javascript:void(0);" class="configRun">导入文件</a></li>
										<li><a href="javascript:void(0);" @click="setwj">导出文件</a></li>
										
										<li><a href="javascript:void(0);" @click="gettburl">图表</a></li>
										<li><a href="javascript:void(0);" @click="get">打印数据</a></li>
									</ul>
								</nav>
							</div>
						</div>
						<!-- <div class="col-12">
							<div class="mobile-menu"></div>
						</div> -->
					</div>
				</div>
			</div>

			<div style="height: 100px;">
				<div id="config" style="visibility:hidden;"></div>
			</div>



			<div style="width: 100%;height: 100%;">
				<div class="layui-row">
					<div class="layui-col-md2">

						<div class="layui-panel" style="height: 100%;margin-top: 20px;">
							<div class="u-flex u-row-center u-col-center">学号搜索<input class="layui-menu-body-title" v-model="ssdata" @input="ss"></input></div>
							<ul class="layui-menu" id="docDemoMenu1">
								<li lay-options="{id: 1}" class="layui-menu-item-checked">
									<div class="layui-menu-body-title">科目表</div>
								</li>
								<li lay-options="{id: 2}">
									<div class="layui-menu-body-title">个人表</div>
								</li>
								<li lay-options="{id: 3}">
									<div class="layui-menu-body-title">分段</div>
								</li>
								<li lay-options="{id: 4}">
									<div class="layui-menu-body-title">专业平均分</div>
								</li>
								<li lay-options="{id: 5}">
									<div class="layui-menu-body-title">个人平均分</div>
								</li>
								<li lay-options="{id: 6}">
									<div class="layui-menu-body-title">班级合格率</div>
								</li>
							</ul>
							<div class="layui-col-xs6" style="width: 100%;" :style="biaotype2==3?'':'height: 0;overflow: hidden;'">
								<div v-if="chartdata.length>0" class="u-flex u-row-center"
									style="width: 100%;color: #FFFFFF;background: #052b38;">
									<i class="layui-icon layui-icon-circle-dot"
										style="color: #01AAED;margin-right: 15px;"></i>
									分段
								</div>
								<div class="u-flex u-row-center" style="width: 100%;">
									<canvas id="myChart" width="200" height="260"></canvas>
								</div>
							</div>
							<div class="layui-col-xs6" style="width: 100%;" :style="biaotype2==4?'':'height: 0;overflow: hidden;'">
								<div v-if="chartdata3.length>0" class="u-flex u-row-center"
									style="width: 100%;color: #FFFFFF;background: #052b38;">
									<i class="layui-icon layui-icon-circle-dot"
										style="color: #01AAED;margin-right: 15px;"></i>
									专业平均分
								</div>
								<div class="u-flex u-row-center" style="width: 100%;">
									<canvas id="myChart3" width="200" height="260"></canvas>
								</div>
							</div>
							<div class="layui-col-xs6" style="width: 100%;" :style="biaotype2==5?'':'height: 0;overflow: hidden;'">
								<div v-if="chartdata4.length>0" class="u-flex u-row-center"
									style="width: 100%;color: #FFFFFF;background: #052b38;">
									<i class="layui-icon layui-icon-circle-dot"
										style="color: #01AAED;margin-right: 15px;"></i>
									个人平均分
								</div>
								<div class="u-flex u-row-center" style="width: 100%;">
									<canvas id="myChart4" width="200" height="260"></canvas>
								</div>
							</div>
							<div class="layui-col-xs6" style="width: 100%;" :style="biaotype2==6?'':'height: 0;overflow: hidden;'">
								<div v-if="chartdata6.length>0" class="u-flex u-row-center"
									style="width: 100%;color: #FFFFFF;background: #052b38;">
									<i class="layui-icon layui-icon-circle-dot"
										style="color: #01AAED;margin-right: 15px;"></i>
									班级合格率
								</div>
								<div class="u-flex u-row-center" style="width: 100%;">
									<canvas id="myChart6" width="200" height="260"></canvas>
								</div>
							</div>
							
							
						</div>

					</div>
					<div class="layui-col-md10">

						<div :style="biaotype==1?'':'height: 0;overflow: hidden;'">

							<div id="wrap" style="width: 100%;">
								<table class="layui-table" id="table" lay-filter="test" style="margin-top: 0px;">
								</table>
							</div>



						</div>

						<div :style="biaotype==2?'':'height: 0;overflow: hidden;'">

							<div id="wrap2" style="width: 100%;">
								<table class="layui-table" id="table2" lay-filter="test" style="margin-top: 0px;">
								</table>
							</div>

							<div class="layui-row">
								<!-- <div class="layui-col-xs6" style="padding-right: 5px;">
									<div v-if="chartdata.length>0" class="u-flex u-row-center"
										style="width: 100%;color: #FFFFFF;background: #052b38;">
										<i class="layui-icon layui-icon-circle-dot"
											style="color: #01AAED;margin-right: 15px;"></i>
										分段
									</div>
									<div class="u-flex u-row-center" style="width: 100%;">
										<canvas id="myChart" width="400" height="260"></canvas>
									</div>
								</div> -->
								<!-- <div class="layui-col-xs6">
									<div v-if="chartdata2.length>0" class="u-flex u-row-center"
										style="width: 100%;color: #FFFFFF;background: #052b38;">
										<i class="layui-icon layui-icon-circle-dot" style="color: #01AAED;margin-right: 15px;"></i>
										班级平均分</div>
									<div class="u-flex u-row-center" style="width: 100%;">
										<canvas id="myChart2" width="400" height="260"></canvas>
									</div>
								</div> -->
								<!-- <div class="layui-col-xs6" style="padding-left: 5px;">
									<div v-if="chartdata3.length>0" class="u-flex u-row-center"
										style="width: 100%;color: #FFFFFF;background: #052b38;">
										<i class="layui-icon layui-icon-circle-dot"
											style="color: #01AAED;margin-right: 15px;"></i>
										专业平均分
									</div>
									<div class="u-flex u-row-center" style="width: 100%;">
										<canvas id="myChart3" width="400" height="260"></canvas>
									</div>
								</div>
								<div class="layui-col-xs6" style="padding-right: 5px;">
									<div v-if="chartdata4.length>0" class="u-flex u-row-center"
										style="width: 100%;color: #FFFFFF;background: #052b38;">
										<i class="layui-icon layui-icon-circle-dot"
											style="color: #01AAED;margin-right: 15px;"></i>
										个人平均分
									</div>
									<div class="u-flex u-row-center" style="width: 100%;">
										<canvas id="myChart4" width="400" height="260"></canvas>
									</div>
								</div> -->
								<!-- <div class="layui-col-xs6">
									<div v-if="chartdata5.length>0" class="u-flex u-row-center"
										style="width: 100%;color: #FFFFFF;background: #052b38;">
										<i class="layui-icon layui-icon-circle-dot" style="color: #01AAED;margin-right: 15px;"></i>
										合格率</div>
									<div class="u-flex u-row-center" style="width: 100%;">
										<canvas id="myChart5" width="400" height="260"></canvas>
									</div>
								</div> -->
								<!-- <div class="layui-col-xs6" style="padding-left: 5px;">
									<div v-if="chartdata6.length>0" class="u-flex u-row-center"
										style="width: 100%;color: #FFFFFF;background: #052b38;">
										<i class="layui-icon layui-icon-circle-dot"
											style="color: #01AAED;margin-right: 15px;"></i>
										班级合格率
									</div>
									<div class="u-flex u-row-center" style="width: 100%;">
										<canvas id="myChart6" width="400" height="260"></canvas>
									</div>
								</div> -->
							</div>

						</div>



					</div>
					
					<!-- <div class="layui-col-md2" style="margin-top: 20px;">
					
						<div class="layui-panel" style="height: 100%;margin-top: 10px;">
							<div class="layui-col-xs6" style="padding-right: 5px;width: 100%;">
								<div v-if="chartdata4.length>0" class="u-flex u-row-center"
									style="width: 100%;color: #FFFFFF;background: #052b38;">
									<i class="layui-icon layui-icon-circle-dot"
										style="color: #01AAED;margin-right: 15px;"></i>
									个人平均分
								</div>
								<div class="u-flex u-row-center" style="width: 100%;">
									<canvas id="myChart4" width="200" height="260"></canvas>
								</div>
							</div>
							<div class="layui-col-xs6" style="padding-left: 5px;width: 100%;">
								<div v-if="chartdata6.length>0" class="u-flex u-row-center"
									style="width: 100%;color: #FFFFFF;background: #052b38;">
									<i class="layui-icon layui-icon-circle-dot"
										style="color: #01AAED;margin-right: 15px;"></i>
									班级合格率
								</div>
								<div class="u-flex u-row-center" style="width: 100%;">
									<canvas id="myChart6" width="200" height="260"></canvas>
								</div>
							</div>
							
							
						</div>
					
					</div> -->
					
					
					
				</div>



			</div>


			<!-- <div style="padding: 20px;">
				<div>
					学生账号：添加数据->保存数据数据库->只会添加关联自身。
				</div>
				<div>
					管理员账号：保存数据数据库->会覆盖当前全部数据。
				</div>
			</div> -->
			<!-- <div class="u-flex u-row-between" style="padding: 20px;">
				<div>
					<button type="button" @click="add">添加数据（学生只需要填写科目和分数）</button>
					<button type="button" @click="set">保存数据数据库（需先登录）</button>
					<button type="button" @click="getpy">查看评语（管理员可更改）</button>
					<button type="button" @click="del">删除数据</button>
					<button type="button" @click="gettb">图表分析</button>
					<button type="button" @click="get">打印数据</button>
					<button type="button" @click="setwj">导出文件</button>
				</div>
				<div>
					<div v-if="retuserid">用户ID:{{retuserid}}</div>
					<div v-if="type">类型:{{type==1?'学生':'管理员'}}</div>
					<button type="button" id="login" style="padding: 30px;">登录</button>
					<button type="button" id="register" style="padding: 30px;">注册</button>
				</div>
			</div> -->
			<!-- <div id="wrap" style="width: 100%;">
				<table class="layui-table" id="table" lay-filter="test"></table>
				<div style="padding: 30px;">
					<div>
						<div v-for="(item, index) in xoData" :key="index">
							{{index}}-{{item}}
						</div>
						<div v-if="总体分段总结" style="margin-top: 20px;">
							<div>总结:</div>
							<div>总体分段:{{总体分段总结}}偏高</div>
						</div>
					</div>
				</div>
			</div> -->


			<!-- 透明屏障 -->
			<div class="div-tmpz_background"></div>
			<!-- 模态框 登录 -->
			<div class="div-mtk div-mtk_login">
				<div>
					<div>
						<input type="text" placeholder="键入用户ID或用户名称 (管理员 id:1 密码:1)" v-model="useid" />
						<input type="text" name="text" value="" placeholder="键入密码" v-model="password" />
						<div class="u-flex u-row-center">
							<button type="button" class="layui-btn layui-btn-normal" @click="login">登录</button>
						</div>
					</div>
				</div>
			</div>
			<!-- 模态框 注册 -->
			<div class="div-mtk div-mtk_register">
				<div>
					<div style="background: #FFFFFF;padding: 20px;">
						<div class="layui-form-item">
							<label class="layui-form-label">用户名称</label>
							<div class="layui-input-block">
								<input type="text" name="title" v-model="name" required lay-verify="required"
									placeholder="键入用户名称" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">密码</label>
							<div class="layui-input-block">
								<input type="text" name="title" v-model="password" required lay-verify="required"
									placeholder="键入密码" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">学号</label>
							<div class="layui-input-block">
								<input type="text" name="title" v-model="StudentID" required lay-verify="required"
									placeholder="键入学号" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">专业</label>
							<div class="layui-input-block">
								<input type="text" name="title" v-model="major" required lay-verify="required"
									placeholder="键入专业" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">班级</label>
							<div class="layui-input-block">
								<input type="text" name="title" v-model="lass" required lay-verify="required"
									placeholder="键入班级" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="u-flex u-row-center">
							<button type="button" class="layui-btn layui-btn-normal" @click="register">注册</button>
						</div>
					</div>
				</div>
			</div>
			<!-- 模态框 评语 -->
			<div class="div-mtk div-mtk_comment">
				<div>
					<div style="background: #FFFFFF;padding: 20px;">
						<div class="layui-form-item layui-form-text">
							<!-- <label class="layui-form-label">评语</label> -->
							<div class="" style="width: 600px;height: 200px">
								<textarea v-model="comment" v-if="type==2" style="width: 100%;height: 100%;"
									placeholder="请输入内容" class="layui-textarea"></textarea>
								<textarea v-model="comment" v-else readonly style="width: 100%;height: 100%;"
									placeholder="管理员未评语" class="layui-textarea"></textarea>
							</div>
						</div>
					</div>
				</div>
			</div>

		</div>

	</body>

	<script src="https://gw.alipayobjects.com/os/lib/antv/f2/3.7.0/dist/f2.min.js"></script>
	<script src="js/Print.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/xlsx.full.min.js" type="text/javascript" charset="utf-8"></script>
	
	<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
	<script src="layui.js" charset="utf-8"></script>
	<script src="js/public.js" type="text/javascript" charset="utf-8"></script>

	<script type="text/javascript">
		const XApp = {
			// Http: 'http://localhost:8080'
		}

		var Xtable = layui.table;
		var Xlayer = layui.layer;
		var Xdropdown = layui.dropdown;

		var myVue = new Vue({
			el: "#firstVue",
			data: {
				Data: [],
				// 分段
				chartdata: [],
				// 班级平均分
				chartdata2: [],
				// 专业平均分
				chartdata3: [],
				// 个人平均分
				chartdata4: [],
				// 合格率
				chartdata5: [],
				// 班级合格率
				chartdata6: [],
				xoData: {},
				useid: '',
				password: '',
				name: '',
				StudentID: '',
				major: '',
				lass: '',
				sex: '',
				retuserid: '',
				总体分段总结: '',
				comment: '',
				type: 0,
				// 表类
				biaotype: 1,
				biaotype2:0,
				ssdata:''
			},
			mounted: function() {
				this.$nextTick(function (){
					$v.request('/get','POST',{
						data: this.Data,
						userid: this.retuserid
					}).setDataToJsonStr(true).send().then((res)=>{
						this.Data = res.data
						this.gettb()
						settableval(res.data)
						$('div.div-tmpz_background').hide();
						$('div.div-mtk_login').hide();
					})
				})
			},
			methods: {
				ss:function(e){
					console.log(this.ssdata)
					if(this.Data.length==0)return
					let value=this.ssdata
					if(value==''){
						settableval(this.Data)
						return
					}
					let data=[]
					this.Data.map((v,i)=>{
						if(v.学号.indexOf(value)!= -1&&v.学号<=value.length)data.push(v)
					})
					if(data.length==0)return
					
					settableval(data)
				},
				getgrzj:function(){
					$.cookie('userdata',JSON.stringify(this.Data[rowtesttable.data.did - 1]))
					$.cookie('chartdata',JSON.stringify(this.chartdata))
					window.open("usersummary.html");
					console.log(this.Data[rowtesttable.data.did - 1])
				},
				get: function() {
					let id = '#wrap'
					if (this.biaotype == 2) id + '2'
					Print(id, {
						onStart: function() {
							console.log('onStart', new Date())
						},
						onEnd: function() {
							console.log('onEnd', new Date())
						}
					})
				},
				add: function() {
					this.Data.push({})
					settableval(this.Data)
				},
				set: function() {
					if (!this.retuserid) {
						Xlayer.msg("请先登录")
						return
					}
					if(this.type!=2){
						Xlayer.msg("你不是管理员")
						return
					}
					let odata = this.Data
					$v.request('/set','POST',{
						data: this.Data,
						userid: this.retuserid
					}).setDataToJsonStr(true).send().then((res)=>{
						Xlayer.msg("成功")
					})
				},
				getpy: function() {
					let val = ''
					if(this.biaotype==1){
						try {
							val = this.Data[rowtesttable.data.did - 1].个人评语
						} catch (e) {
							//TODO handle the exception
						}
					}else{
						try {
							val = this.Data[rowtesttable.data.did - 1].总体评语
						} catch (e) {
							//TODO handle the exception
						}
					}
					if (!val) val = ''
					this.comment = val
					$('div.div-tmpz_background').show();
					$('div.div-mtk_comment').show();
				},
				login: function() {
					$v.request('/login','POST',{
						userid: this.useid,
						password: this.password
					}).setDataToJsonStr(true).send().then((res)=>{
						this.retuserid = res.data.userid
						this.type = res.data.type
						Xlayer.msg("成功")
						
						$v.request('/get','POST',{}).setDataToJsonStr(true).send().then((res)=>{
							this.Data = res.data
							this.gettb()
							settableval(res.data)
							$('div.div-tmpz_background').hide();
							$('div.div-mtk_login').hide();
						})
					})
				},
				register: function() {
					$v.request('/get','POST',{
						type: 1,
						name: this.name,
						sex: 1,
						StudentID: this.StudentID,
						major: this.major,
						_class: this.lass,
						password: this.password,
					}).setDataToJsonStr(true).send().then((res)=>{
						this.retuserid = res.data.userid
						this.type = res.data.type
						Xlayer.msg("成功")
						$('div.div-tmpz_background').hide();
						$('div.div-mtk_register').hide();
					})
				},
				setwj: function() {
					let wsdata = []
					let vdata = []
					vdata.push('姓名')
					vdata.push('性别')
					vdata.push('学号')
					vdata.push('专业')
					vdata.push('班级')
					vdata.push('科目')
					vdata.push('分数')
					vdata.push('学期')
					vdata.push('个人评语')
					vdata.push('总体评语')
					vdata.push('班级平均分')
					vdata.push('班级最高分')
					vdata.push('班级最低分')

					wsdata.push(vdata)
					this.Data.map((v, i) => {
						let vdata = []
						vdata.push(v.姓名)
						vdata.push(v.性别)
						vdata.push(v.学号)
						vdata.push(v.专业)
						vdata.push(v.班级)
						vdata.push(v.科目)
						vdata.push(v.分数)
						vdata.push(v.学期)
						if (v.个人评语) vdata.push(v.个人评语)
						// if (v.总体评语) vdata.push(总体评语)
						// if (v.班级平均分) vdata.push(班级平均分)
						if (v.班级最高分) vdata.push(v.班级最高分)
						if (v.班级最低分) vdata.push(v.班级最低分)

						wsdata.push(vdata)
					})
					let ws = XLSX.utils.aoa_to_sheet(wsdata);
					let wb = XLSX.utils.book_new();
					XLSX.utils.book_append_sheet(wb, ws, "wj");
					XLSX.writeFile(wb, "wj.xlsx")
				},
				del: function() {
					if (rowtesttable == null) return
					rowtesttable.del()
					rowtesttable = null
					this.gettb()
				},
				gettburl:function(){
					let _window=window.open("Chart.html")
					$v.$pall.set('user',{
						retuserid:$.cookie('retuserid'),
						type:$.cookie('type')
					},_window)
					$v.$pall.set('vue.Data',{
						Data:this.Data,
						xoData:this.xoData
					},_window)
					return
				},
				gettb: function() {
					this.Data =xo(this.Data)
					
					
					
					// F2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
					// Step 1: 创建 Chart 对象
					{
						const chart = new F2.Chart({
							id: 'myChart',
							pixelRatio: window.devicePixelRatio // 指定分辨率
						});
						// Step 2: 载入数据源
						chart.source(this.chartdata);
						// Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
						chart.interval().position('genre*sold').color('genre');
						// Step 4: 渲染图表
						chart.render();
					} {
						// const chart = new F2.Chart({
						// 	id: 'myChart2',
						// 	pixelRatio: window.devicePixelRatio // 指定分辨率
						// });
						// // Step 2: 载入数据源
						// chart.source(this.chartdata2);
						// // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
						// chart.interval().position('genre*sold').color('genre');
						// // Step 4: 渲染图表
						// chart.render();
					} {
						const chart = new F2.Chart({
							id: 'myChart3',
							pixelRatio: window.devicePixelRatio // 指定分辨率
						});
						// Step 2: 载入数据源
						chart.source(this.chartdata3);
						// Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
						chart.interval().position('genre*sold').color('genre');
						// Step 4: 渲染图表
						chart.render();
					} {
						const chart = new F2.Chart({
							id: 'myChart4',
							pixelRatio: window.devicePixelRatio // 指定分辨率
						});
						// Step 2: 载入数据源
						chart.source(this.chartdata4);
						// Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
						chart.interval().position('genre*sold').color('genre');
						// Step 4: 渲染图表
						chart.render();
					} {
						// const chart = new F2.Chart({
						// 	id: 'myChart5',
						// 	pixelRatio: window.devicePixelRatio // 指定分辨率
						// });
						// chart.source(this.chartdata5);
						// chart.tooltip({
						// 	custom: true, // 自定义 tooltip 内容框
						// 	onChange: function onChange(obj) {
						// 		const legend = chart.get('legendController').legends.top[0];
						// 		const tooltipItems = obj.items;
						// 		const legendItems = legend.items;
						// 		const map = {};
						// 		legendItems.forEach(function(item) {
						// 			map[item.name] = _.clone(item);
						// 		});
						// 		tooltipItems.forEach(function(item) {
						// 			const name = item.name;
						// 			const value = item.value;
						// 			if (map[name]) {
						// 				map[name].value = value;
						// 			}
						// 		});
						// 		legend.setItems(_.values(map));
						// 	},
						// 	onHide: function onHide() {
						// 		const legend = chart.get('legendController').legends.top[0];
						// 		legend.setItems(chart.getLegendItems().country);
						// 	}
						// });
						// chart.interval()
						// 	.position('班级*val')
						// 	.color('name')
						// 	.adjust({
						// 		type: 'dodge',
						// 		marginRatio: 0.05 // 设置分组间柱子的间距
						// 	});
						// chart.render();
					} {
						const chart = new F2.Chart({
							id: 'myChart6',
							pixelRatio: window.devicePixelRatio // 指定分辨率
						});
						// Step 2: 载入数据源
						chart.source(this.chartdata6);
						// Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
						chart.interval().position('genre*sold').color('genre');
						// Step 4: 渲染图表
						chart.render();
					}
				}
			}
		})

		function xo(json) {
			let 课程总数 = 5
			let xoData = {
				个人总分: {},
				班级总分: {},
				班级总人数: {},
				专业总分: {},
				专业总人数: {},

				个人平均分: {},
				班级平均分: {},
				专业平均分: {},
				个人最高分: 0,
				个人最低分: 100,
				班级最高分: {},
				班级最低分: {},
				专业最高分: {},
				专业最低分: {},
				合格率: {},
				分段数: {}
			}

			json.map((v, i) => {
				if (parseInt(xoData.个人总分[v.姓名])) {
					xoData.个人总分[v.姓名] += parseInt(v.分数)
				} else {
					xoData.个人总分[v.姓名] = 0 + parseInt(v.分数)
				}

				if (parseInt(xoData.班级总分[v.班级])) {
					xoData.班级总分[v.班级] += parseInt(v.分数)
				} else {
					xoData.班级总分[v.班级] = 0 + parseInt(v.分数)
				}

				if (parseInt(xoData.班级总人数[v.班级])) {
					xoData.班级总人数[v.班级] += 1
				} else {
					xoData.班级总人数[v.班级] = 1
				}

				if (parseInt(xoData.专业总分[v.专业])) {
					xoData.专业总分[v.专业] += parseInt(v.分数)
				} else {
					xoData.专业总分[v.专业] = 0 + parseInt(v.分数)
				}

				if (parseInt(xoData.专业总人数[v.专业])) {
					xoData.专业总人数[v.专业] += 1
				} else {
					xoData.专业总人数[v.专业] = 1
				}

				if (parseInt(xoData.个人最高分) < parseInt(v.分数)) {
					xoData.个人最高分 = v.分数
				}
				if (parseInt(xoData.个人最低分) > parseInt(v.分数)) {
					xoData.个人最低分 = v.分数
				}

				if (parseInt(xoData.班级最高分[v.班级] == undefined ? 0 : xoData.班级最高分[v.班级]) < parseInt(v.分数)) {
					xoData.班级最高分[v.班级] = v.分数
				}
				if (parseInt(xoData.班级最低分[v.班级] == undefined ? 100 : xoData.班级最低分[v.班级]) > parseInt(v.分数)) {
					xoData.班级最低分[v.班级] = v.分数
				}

				if (parseInt(xoData.专业最高分[v.专业] == undefined ? 0 : xoData.专业最高分[v.专业]) < parseInt(v.分数)) {
					xoData.专业最高分[v.专业] = v.分数
				}
				if (parseInt(xoData.专业最低分[v.专业] == undefined ? 100 : xoData.专业最低分[v.专业]) > parseInt(v.分数)) {
					xoData.专业最低分[v.专业] = v.分数
				}

				if (v.分数 <= 59) xoData.分段数.不及格 == undefined ? xoData.分段数.不及格 = 1 : xoData.分段数.不及格++
				if (v.分数 > 59 && v.分数 <= 69) xoData.分段数.及格 == undefined ? xoData.分段数.及格 = 1 : xoData.分段数.及格++
				if (v.分数 > 69 && v.分数 <= 79) xoData.分段数.一般 == undefined ? xoData.分段数.一般 = 1 : xoData.分段数.一般++
				if (v.分数 > 79 && v.分数 <= 89) xoData.分段数.优秀 == undefined ? xoData.分段数.优秀 = 1 : xoData.分段数.优秀++
				if (v.分数 > 89 && v.分数 <= 100) xoData.分段数.异常优秀 == undefined ? xoData.分段数.异常优秀 = 1 : xoData.分段数.异常优秀++

				if (v.分数 <= 59) {
					if (xoData.合格率[v.班级] == undefined) {
						xoData.合格率[v.班级] = {
							[v.科目]: {
								'不及格': 1
							}
						}
					} else {
						try {
							console.log(xoData.合格率[v.班级][v.科目].不及格)
						} catch (e) {
							xoData.合格率[v.班级][v.科目] = {
								'不及格': 1
							}
							//TODO handle the exception
						}
						xoData.合格率[v.班级][v.科目].不及格 == undefined ? xoData.合格率[v.班级][v.科目].不及格 = 1 : xoData.合格率[v.班级][v
							.科目
						].不及格++
					}
				}
				if (v.分数 > 59 && v.分数 <= 69) {
					if (xoData.合格率[v.班级] == undefined) {
						xoData.合格率[v.班级] = {
							[v.科目]: {
								'及格': 1
							}
						}
					} else {
						try {
							console.log(xoData.合格率[v.班级][v.科目].及格)
						} catch (e) {
							xoData.合格率[v.班级][v.科目] = {
								'及格': 1
							}
							//TODO handle the exception
						}
						xoData.合格率[v.班级][v.科目].及格 == undefined ? xoData.合格率[v.班级][v.科目].及格 = 1 : xoData.合格率[v.班级][v
							.科目
						].及格++
					}
				}
				if (v.分数 > 69 && v.分数 <= 79) {
					if (xoData.合格率[v.班级] == undefined) {
						xoData.合格率[v.班级] = {
							[v.科目]: {
								'中等': 1
							}
						}
					} else {
						try {
							console.log(xoData.合格率[v.班级][v.科目].中等)
						} catch (e) {
							xoData.合格率[v.班级][v.科目] = {
								'中等': 1
							}
							//TODO handle the exception
						}
						xoData.合格率[v.班级][v.科目].中等 == undefined ? xoData.合格率[v.班级][v.科目].中等 = 1 : xoData.合格率[v.班级][v
							.科目
						].中等++
					}
				}
				if (v.分数 > 79 && v.分数 <= 89) {
					if (xoData.合格率[v.班级] == undefined) {
						xoData.合格率[v.班级] = {
							[v.科目]: {
								'良好': 1
							}
						}
					} else {
						try {
							console.log(xoData.合格率[v.班级][v.科目].良好)
						} catch (e) {
							xoData.合格率[v.班级][v.科目] = {
								'良好': 1
							}
							//TODO handle the exception
						}
						xoData.合格率[v.班级][v.科目].良好 == undefined ? xoData.合格率[v.班级][v.科目].良好 = 1 : xoData.合格率[v.班级][v
							.科目
						].良好++
					}
				}
				if (v.分数 > 89 && v.分数 <= 100) {
					if (xoData.合格率[v.班级] == undefined) {
						xoData.合格率[v.班级] = {
							[v.科目]: {
								'优秀': 1
							}
						}
					} else {
						try {
							console.log(xoData.合格率[v.班级][v.科目].优秀)
						} catch (e) {
							xoData.合格率[v.班级][v.科目] = {
								'优秀': 1
							}
							//TODO handle the exception
						}
						xoData.合格率[v.班级][v.科目].优秀 == undefined ? xoData.合格率[v.班级][v.科目].优秀 = 1 : xoData.合格率[v.班级][v
							.科目
						].优秀++
					}
				}
				
				
				
			})
			for (let key in xoData.个人总分) {
				xoData.个人平均分[key] = xoData.个人总分[key] / 课程总数
			}
			for (let key in xoData.班级总分) {
				xoData.班级平均分[key] = xoData.班级总分[key] / xoData.班级总人数[key]
			}
			for (let key in xoData.专业总分) {
				xoData.专业平均分[key] = xoData.专业总分[key] / xoData.专业总人数[key]
			}
			
			console.log(xoData)
			
			myVue.xoData = xoData
			
			
			json.map((v, i) =>{
				v.班级平均分=xoData.班级平均分[v.班级]
				v.班级最高分=xoData.班级最高分[v.班级]
				v.班级最低分=xoData.班级最低分[v.班级]
				v.个人总分=xoData.个人总分[v.姓名]
				v.个人平均分=xoData.个人平均分[v.姓名]
				
				v.总科目={}
				json.map((v2, i2) =>{
					if(v.姓名==v2.姓名){
						v.总科目[v2.科目]=v2.分数
					}
				})
			
			})

			myVue.chartdata = [{
					genre: '0-60',
					sold: xoData.分段数.不及格
				},
				{
					genre: '60-70',
					sold: xoData.分段数.及格
				},
				{
					genre: '70-80',
					sold: xoData.分段数.一般
				},
				{
					genre: '80-90',
					sold: xoData.分段数.优秀
				},
				{
					genre: '90-100',
					sold: xoData.分段数.异常优秀
				},
			]

			let chartdata2 = []
			for (let key in xoData.班级平均分) {
				chartdata2.push({
					genre: key,
					sold: xoData.班级平均分[key]
				})
			}
			myVue.chartdata2 = chartdata2

			let chartdata3 = []
			for (let key in xoData.专业平均分) {
				chartdata3.push({
					genre: key,
					sold: xoData.专业平均分[key]
				})
			}
			myVue.chartdata3 = chartdata3

			let chartdata4 = []
			for (let key in xoData.个人平均分) {
				chartdata4.push({
					genre: key,
					sold: xoData.个人平均分[key]
				})
			}
			myVue.chartdata4 = chartdata4

			// 		let chartdata5 = []
			// 		for (let key in xoData.合格率) {
			// 			for (let key2 in xoData.合格率[key]) {
			// 				chartdata5.push({
			// 					name: '不及格',
			// 					班级: key,
			// 					val: xoData.合格率[key][key2].不及格
			// 				})
			// 				chartdata5.push({
			// 					name: '及格',
			// 					班级: key,
			// 					val: xoData.合格率[key][key2].及格
			// 				})
			// 				chartdata5.push({
			// 					name: '优秀',
			// 					班级: key,
			// 					val: xoData.合格率[key][key2].优秀
			// 				})
			// 			}

			// 		}
			// 		myVue.chartdata5 = chartdata5


			let chartdata6 = []
			for (let key in xoData.合格率) {
				for (let key2 in xoData.合格率[key]) {
					chartdata6.push({
						genre: '不及格',
						sold: xoData.合格率[key][key2].不及格
					})
					chartdata6.push({
						genre: '及格',
						sold: xoData.合格率[key][key2].及格
					})
					chartdata6.push({
						genre: '中等',
						sold: xoData.合格率[key][key2].中等
					})
					chartdata6.push({
						genre: '良好',
						sold: xoData.合格率[key][key2].良好
					})
					chartdata6.push({
						genre: '优秀',
						sold: xoData.合格率[key][key2].优秀
					})
					
					break
				}
				break
			}
			myVue.chartdata6 = chartdata6


			let 总体分段总结最高 = 0
			try {
				if (xoData.分段数.不及格 > 总体分段总结最高) {
					总体分段总结最高 = xoData.分段数.不及格
					myVue.总体分段总结 = '不及格'
				}
				if (xoData.分段数.及格 > 总体分段总结最高) {
					总体分段总结最高 = xoData.分段数.及格
					myVue.总体分段总结 = '及格'
				}
				if (xoData.分段数.一般 > 总体分段总结最高) {
					总体分段总结最高 = xoData.分段数.一般
					myVue.总体分段总结 = '一般'
				}
				if (xoData.分段数.优秀 > 总体分段总结最高) {
					总体分段总结最高 = xoData.分段数.优秀
					myVue.总体分段总结 = '优秀'
				}
				if (xoData.分段数.异常优秀 > 总体分段总结最高) {
					总体分段总结最高 = xoData.分段数.异常优秀
					myVue.总体分段总结 = '异常优秀'
				}
			} catch (e) {
				//TODO handle the exception
			}
			
			return json
		}

		$(function() {
			// 显示
			{
				$('#login').bind("click", function(e) {
					$('div.div-tmpz_background').show();
					$('div.div-mtk_login').show();
				});
				$('#register').bind("click", function(e) {
					$('div.div-tmpz_background').show();
					$('div.div-mtk_register').show();
				});
			}
			// 隐藏
			{
				$('div.div-mtk_login>div').bind("click", function(e) {
					$('div.div-tmpz_background').hide();
					$('div.div-mtk_login').hide();
				});
				$('div.div-mtk_register>div').bind("click", function(e) {
					$('div.div-tmpz_background').hide();
					$('div.div-mtk_register').hide();
				});
				$('div.div-mtk_comment>div').bind("click", function(e) {
					$('div.div-tmpz_background').hide();
					$('div.div-mtk_comment').hide();
					if(myVue.biaotype==1){
						myVue.Data[rowtesttable.data.did - 1].个人评语 = myVue.comment
					}else{
						myVue.Data[rowtesttable.data.did - 1].总体评语 = myVue.comment
					}
					myVue.gettb()
					settableval(myVue.Data)
				});
				$('div.div-mtk_login *').bind("click", function(e) {
					// 该方法将停止事件的传播
					e.stopPropagation();
				});
				$('div.div-mtk_register *').bind("click", function(e) {
					// 该方法将停止事件的传播
					e.stopPropagation();
				});
				$('div.div-mtk_comment *').bind("click", function(e) {
					// 该方法将停止事件的传播
					e.stopPropagation();
				});
			}

			$(".configRun").bind("click", function() {
				$("#config input").trigger('click');
			})

			// let json=JSON.parse($.cookie('data'));
			// console.log(json)
			// myVue.Data=json
			// myVue.gettb()
			// settableval(json)

			let retuserid = $.cookie('retuserid');
			let type = $.cookie('type');
			myVue.retuserid = retuserid
			myVue.type = type
		})

		Xtable.on('edit(test)', function(obj) { //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
			console.log(obj.value); //得到修改后的值
			console.log(obj.field); //当前编辑的字段名
			console.log(obj.data); //所在行的所有相关数据  
			myVue.Data[obj.data.did - 1] = obj.data
			myVue.gettb()
		});

		// 当前选中行
		var rowtesttable = null
		Xtable.on('row(test)', function(obj) {
			console.log(obj.tr) //得到当前行元素对象
			console.log(obj.data) //得到当前行数据
			rowtesttable = obj
			myVue.gettb()
		});


		//菜单点击事件，其中 docDemoMenu1 对应的是菜单结构上的 id 指
		Xdropdown.on('click(docDemoMenu1)', (options) => {
			var othis = $(this); //当前菜单列表的 DOM 对象
			// console.log(options); //菜单列表的 lay-options 中的参数
			
			if(options.id==1||options.id==2){
				myVue.biaotype = options.id
			}else{
				myVue.biaotype2 = options.id
			}
			if (myVue.Data.length > 0) {
				settableval(myVue.Data)
			}
		});


		function settableval(json) {
			for (let i = 0; i < json.length; i++) {
				json[i].did = i + 1
			}
			
			if(myVue.biaotype==1){
				Xtable.render({
					elem: '#table', //指定原始表格元素选择器（推荐id选择器）
					cols: [
						[ //表头
							{
								title: '选择',
								type: 'radio'
							},
							{
								field: 'did',
								title: 'ID',
							},
							{
								field: '姓名',
								title: '姓名',
								edit: 'text'
							}, {
								field: '性别',
								title: '性别',
								edit: 'text'
							}, {
								field: '学号',
								title: '学号',
								edit: 'text'
							}, {
								field: '专业',
								title: '专业',
								edit: 'text'
							}, {
								field: '班级',
								title: '班级',
								edit: 'text'
							}, {
								field: '科目',
								title: '科目',
								edit: 'text'
							}, {
								field: '分数',
								title: '分数',
								edit: 'text'
							}, {
								field: '个人评语',
								title: '个人评语',
							}
						]
					], //设置表头
					data: json,
					page: true,
					limit: 100,
					// cellMinWidth: 200,
					height: 'full-200'
				});
			}

			if(myVue.biaotype==2){
				Xtable.render({
					elem: '#table2', //指定原始表格元素选择器（推荐id选择器）
					cols: [
						[ //表头
							{
								title: '选择',
								type: 'radio'
							},
							{
								field: 'did',
								title: 'ID',
							},
							{
								field: '姓名',
								title: '姓名',
								edit: 'text'
							}, {
								field: '性别',
								title: '性别',
								edit: 'text'
							}, {
								field: '学号',
								title: '学号',
								edit: 'text'
							}, {
								field: '专业',
								title: '专业',
								edit: 'text'
							}, {
								field: '班级',
								title: '班级',
								edit: 'text'
							}, {
								field: '学期',
								title: '学期',
								edit: 'text'
							}, {
								field: '科目',
								title: '科目',
								edit: 'text'
							}, {
								field: '分数',
								title: '分数',
								edit: 'text'
							}
							// , {
							// 	field: '班级平均分',
							// 	title: '班级平均分',
							// 	edit: 'text'
							// }, {
							// 	field: '班级最高分',
							// 	title: '班级最高分',
							// 	edit: 'text'
							// }, {
							// 	field: '班级最低分',
							// 	title: '班级最低分',
							// 	edit: 'text'
							// }, {
							// 	field: '总体评语',
							// 	title: '总体评语',
							// }
						]
					], //设置表头
					data: json,
					page: true,
					limit: 100,
					cellMinWidth: 100,
					height: 'full-200'
				});
			}
		}

		let inputFile = document.createElement("input");
		inputFile.setAttribute("id", "readLocalFile");
		inputFile.setAttribute("type", "file");
		inputFile.setAttribute("accept",
			"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
		);
		inputFile.setAttribute("multiple", false); //是否可以多选。这里设置为否
		// inputFile.click();
		document.getElementById("config").appendChild(inputFile);
		document.getElementById('readLocalFile').addEventListener('change', function(e) { //选择文件后执行
			let files = e.target.files;
			if (files.length == 0) return;
			let file = files[0];
			let reader = new FileReader();
			reader.readAsBinaryString(file);
			reader.onload = function(e) {
				let data = e.target.result;
				let workbook = XLSX.read(data, {
					type: 'binary'
				});
				let sheetNames = workbook.SheetNames; // 工作表名称集合
				let worksheet = workbook.Sheets[sheetNames[0]]; // 这里我们只读取第一张sheet 
				let json = XLSX.utils.sheet_to_json(worksheet);

				myVue.Data = json
				myVue.gettb()
				settableval(json)
				if (typeof(callback) == "function") callback(json); //回调 
				document.getElementById('readLocalFile').value = null; //读取后清空
			};
		});

		function httpret(ret) {
			if (ret.code == 0) return true
			if (ret.msg) {
				Xlayer.msg(ret.msg)
			} else {
				Xlayer.msg('请求错误')
			}
			return false
		}
	</script>

	<style type="text/css">
		/* 透明屏障 */
		div.div-tmpz_background {
			position: fixed;
			z-index: 9998;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: #5a6b7d;
			opacity: 0.8;
			display: none;
		}

		/* 模态框 */
		div.div-mtk {
			position: fixed;
			z-index: 9999;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: 0;
			display: none;
		}

		div.div-mtk>div {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100%;
		}

		/* 模态框 登录 */
		div.div-mtk_login>div>div,
		.div-mtk_register {
			width: 45%;
			border: 0;
			padding: 0 20px;
		}

		div.div-mtk_login>div>div>input,.div-mtk_register>input {
			width: 100%;
			height: 20px;
			line-height: 100%;
			padding: 20px;
			border-radius: 5px;
			margin-bottom: 10px;
		}
	</style>

	<style type="text/css">
		.u-font-xs {
			font-size: 22rpx;
		}

		.u-font-sm {
			font-size: 26rpx;
		}

		.u-font-md {
			font-size: 28rpx;
		}

		.u-font-lg {
			font-size: 30rpx;
		}

		.u-font-xl {
			font-size: 34rpx;
		}

		.u-flex {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			align-items: center;
		}

		.u-flex-wrap {
			flex-wrap: wrap;
		}

		.u-flex-nowrap {
			flex-wrap: nowrap;
		}

		.u-col-center {
			align-items: center;
		}

		.u-col-top {
			align-items: flex-start;
		}

		.u-col-bottom {
			align-items: flex-end;
		}

		.u-row-center {
			justify-content: center;
		}

		.u-row-left {
			justify-content: flex-start;
		}

		.u-row-right {
			justify-content: flex-end;
		}

		.u-row-between {
			justify-content: space-between;
		}

		.u-row-around {
			justify-content: space-around;
		}

		.u-text-left {
			text-align: left;
		}

		.u-text-center {
			text-align: center;
		}

		.u-text-right {
			text-align: right;
		}

		.u-flex-col {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
		}
	</style>


</html>
